Психофизиология графических интерфейсов

Как управлять вниманием пользователя, используя базовые знания психофизиологии.

Автор: Ярослав Шуваев

Ярослав Шуваев
Product owner Альфа-Мобайл, подразделения Альфа-Банка.

Ярослав работал креативным директором digital-подразделения DDVB, руководил digital-проектами для крупнейших отечественных и зарубежных компаний, среди которых: добывающие компании «Газпром», «Татнефть», «Башнефть», Внешэкономбанк, Администрация Президента, Правительство Москвы, QIWI, фармацевтическая компания STADA, холдинг Алютех, девелоперская компания «Высота».

Куратор зимнего интенсива «Интерактивный дизайн: UX & UI Design» Британской высшей школы дизайна.

shuvaev.com

Почему статья называется «Психофизиология графических интерфейсов»

Психофизиология — наука, изучающая нейрофизиологические механизмы психических процессов, состояний и поведения.

С точки зрения теории систем, человек — это информационная система, так же как и компьютер. Есть разные каналы ввода и вывода этой информации. В компьютер информация вводится при помощи клавиатуры, мышки, голоса, жестов. Пользователь получает информацию по зрительному каналу: через экран, а также через аудиальный канал и тактильный (например, часы Apple Watch, которые вздрагивают, когда приходит сообщение). Но основной канал — визуальный. Поэтому мы рассмотрим физиологические аспекты поведения человека при взаимодействии с графическим (визуальным) интерфейсом.

часть 1

Группы

Магическое правило 7+1 / Геометрическая память /Сильные и слабые группировки

Магическое правило 7±2

Человеку для решения задачи комфортно воспринимать определенное количество объектов. Их число равно 7±2.

К такому выводу пришел Джордж Миллер, американский учёный-психолог, после того, как провел серию экспериментов в лаборатории Белла (крупный исследовательский центр в области телекоммуникаций, электронных и компьютерных систем).

Если объектов становится больше, человек стремится избегать решать задачу. Либо сводит ее к более простым способам решения.

Правило считалось классическим, но недавно было опровергнуто. Новые исследования, в которых были задействованы более точные инструменты, показали, что количество воспринимаемых объектов зависит от самих объектов, задачи и времени, которое отведено на ее решение.

Лучше всего мы запоминаем цифры. Есть вероятность, что мы просто натренировались это делать. Когда-то не было калькуляторов и люди много считали в уме, запоминали номера телефонов и т.д. Возможно, постепенно это будет меняться.

Легко запоминаются цвета. Мы очень быстро решаем задачи, в которых требуется цветовая идентификация.

Буквы на третьем месте. В детстве мы запомнили 33 буквы и дальше нам легко с ними взаимодействовать.

Время восприятия элемента в зависимости от типа. Источник: knosof.co.uk

Почему пользователи всегда пытаются решать задачу самым экономичным способом?

Энергетический подход к эволюции мозга говорит о том, что мозг всегда стремится экономить энергию, стараясь активировать как можно меньше разделов. Это связано с тем, что очищенные углеводы, которые поступают из пищи — это ценный ресурс, который нужен организму для поддержания жизнедеятельности.

Это можно сравнить с установкой приложений на телефон: как будто люди стараются активировать как можно меньше приложений, чтобы экономить батарейку.

Если можно задачу решить более простым способом, то мозг всегда будет двигаться по пути наименьшего сопротивления.

Пример использования принципа 7±2

Дизайнер оставил в меню только пять элементов, а остальные убрал в «бургер».

Пример несоблюдения принципа 7±2

Даже трудно сказать сколько объектов содержит первый уровень ссылок. Если мы ленимся считать, то читать пользователи их точно не будут.

Скриншот сайта mbm.ru

Способ решения — укрупнить и предложить пользователю пять крупных сущностей, чтобы внутри он взаимодействовал с другими сущностями. Таким образом, он решит задачу первого распределения, а потом уже перестроится на задачу второго уровня. Это будет правильная перекомпановка с точки зрения информационной архитектуры.

Геометрическая память

Ориентироваться в пространстве человеку помогает «внутренний GPS».

В 2014 году Нобелевский комитет присудил премию в области медицины за открытие клеток, которые позволяют точно определять местоположение, запоминать и прокладывать маршруты.
Подробнее

У людей в мозгу есть сетка, которая позволяет нам навигировать внутри пространства и эта сетка масштабируемая. Есть масштаб улицы, а есть масштаб планшета. Все равно пространство покрывается сеткой, и мы вспоминаем определенное место. Это наша геометрическая память.

Изображение с сайта bbc.com/news/health-29504761

Интересный факт: при взаимодействии с объектами и в реальном пространстве, и в виртуальном загораются одни и те же нейроны. То есть когда мы взаимодействуем с интерфейсами, у нас работает внутренняя геометрическая память точно так же, как в процессе взаимодействия с физическими объектами.

Когда мы выстраиваем объекты по какому-то геометрическому закону, мы упрощаем задачу пользователю.

Если человек вспомнил место, где находится объект, у него нет необходимости активировать другие зоны мозга для идентификации по цвету или форме.

Пример задействования геометрической памяти при работе с интерфейсами

Одна из постоянных задач пользователя: быстро найти приложение. Это учитывают разработчики интерфейсов и стараются ее облегчить.

Работа с Dock. Когда мы хотим открыть Photoshop, то сначала мы вспоминаем, что он находится, например, где-то слева. Затем внимание фокусируется и начинается идентификация по цвету и символу.

В iPhone используется сетка: 5 объектов по вертикали и 4 по горизонтали. В Windows Phone присутствует дополнительная идентификация по размеру. Когда появился iPad, то разработчики не стали увеличивать количество иконок, а просто увеличили расстояние между ними. Переключение между экранами — это тоже способ геометрической навигации. Человек запоминает приблизительно какие приложения на каком экране.

Геометрическая память в алфавитных списках

Если для упорядочивания сущностей используется алфавитная сортировка, мы легко ориентируемся, что если то, что мы ищем, начинается на букву «О» или букву «П», то это где-то в середине списка.

Скриншот сайта arzamas.academy

Закон памяти: эффект края

Середину и края пользователь различает лучше всего. Промежуточные положения тоже неплохо запоминаются, а вот промежуточные между промежуточными работают слабо.

Группировки объектов

Почему важны группировки. Примеры сильных и слабых группировок.

Человек довольно легко визуально группирует геометрические объекты, если ему не мешать.

Если группировка слабая, то тогда человеку приходится активировать дополнительные ресурсы, что бы обобщить и абстрагировать признаки предмета.

Пример слабой группировки.

Сильная группировка

Расстояние выбрано таким образом, что мы легко соотносим картинку и подпись, понимаем, где единое целое.

Слабая группировка

Мы можем сгруппировать объекты, но тут мы это делаем по косвенным признакам и понимаем, что то ли верстка поплыла, то ли это делал неквалифицированный дизайнер.

При работе с текстом закон группировки тоже действует. Строки — это тоже объекты. Параграф — это группа объектов строк. Строка — это группа объектов слов, а слово — группа букв. Поэтому элементы текста нужно компоновать так, чтобы пользователь на затруднялся распознавать группы.

Скриншот сайта lamb.cc/typograph/

В первом примере легко понять где заголовок первого уровня, а где второго. Во втором это не так очевидно, но мы можем понять по логике текста. В третьем примере то, что должно быть заголовком второго уровня, прибито к предыдущему параграфу и структура непонятна.

Группировки должны быть сильными, чтобы пользователь не активировал дополнительные ресурсы мозга для решения таких задач.

часть 2

Контраст

Контраст формы / Лицо и взгляд / Контраст цвета / Контраст размера / Контраст движения

Контраст формы

Сложные объекты вызывают более сильное возмущение в визуальном пространстве.

На сложных объектах мы фокусируемся в первую очередь. Для жизни важно отличать объект от фона, поэтому фокусировка происходит достаточно быстро, и это происходит неосознанно, мозг делает всю работу за нас.

Мы мгновенно фокусируемся на человеке, как сложном объекте, несмотря на то, что по цвету он почти сливается с фоном.

Как контраст формы используется на практике?

Дизайнеры направляют внимание пользователя на сложную форму, убирая менее сложные объекты на задний план. Мы фокусируемся на этом объекте, а потом, если не понимаем что требуется, читаем подсказку.

Расфокус — один из способов выделить сложный объект на фоне множества других. Либо мы используем затемнение, это тоже такое способ выделения объектов — образуется воздушная перспектива и объекты, которые дальше, выглядят более туманными, чем объект на переднем плане.

Обратный контраст формы работает не очень хорошо. Очень сложно найти простой объект среди сложных — это как выделиться на Хэллоуине в костюме обычного человека.

Пример игнорирования принципа контраста формы

Сложно поверить, но на скриншоте ниже страница информационного агентства. Найти на ней содержательную часть невероятно сложно.

Возможно, контент спрятан нарочно, чтобы люди больше смотрели баннеры, пытаясь найти контентный блок, который мимикрирует под баннеры, ускользает из визуального поля.

«Баннерная слепота»

Это особенность восприятия веб-страниц, когда пользователь постепенно перестает замечать баннеры.

Люди пытаются не тратить время на решение задач, которые им не очень нужны и фильтруют визуальное пространство. Можно провести аналогию с Ниагарским водопадом: люди, которые приезжают на водопад не слышат друг друга, а люди, которые живут рядом, не слышат водопада. Это связано с тем, что сигнал определенной частоты постепенно вырезается из общей полосы частоты, информация от этих нейронов затухает, сигнал становится все слабее и слабее.

Температурная карта чтения текста показывает, что сценарий чтения похож на букву F: люди читают первый параграф, перепрыгивают второй и дальше идут в середину.

Правую колонку с рекламой вообще игнорируется и ее можно назвать «кладбищем баннеров» — никто на нее не смотрит.

Лицо и взгляд

Лица людей — это то, что гарантировано привлечет внимание зрителя. Направление взгляда сфокусирует это внимание на нужном объекте.

Лицо человека — то, что люди отчетливо помнят много лет. Эту особенность человеческого восприятия часто используют в рекламе. Например, на постерах фильмов всегда используют лица актеров. Мы не помним имя актера, забываем название фильма, но если мы видим лица, для нас это как набор тегов, мы понимаем стоит ли нам смотреть этот фильм или нет.

Лицо — естественная «ловушка для глаз».

Большое значение имеет направление взгляда. Как только ребенок начал смотреть на текст, то выросла конверсия в прочтении этого блока, выросла конверсия в просмотре товара и даже логотипа.

Если в макете поставить девушку рядом с кнопкой «купить», будет одна конверсия. Девушка смотрит на кнопку купить — конверсия растет. Женщина смотрит и указывает рукой — конверсия растет еще сильнее. У девушки рука согнута в локте — часть взглядов утекает вниз из-за воображаемой стрелки, которую локоть образует. Поставили мужчину — конверсия стала меньше. Поставили женщину рядом с мужчиной — вообще упала почти до нуля: никому не интересно что они там делают.

Контраст цвета

Контраст цвета — очень сильный выделитель.

Контраст цвета вызывает раздражение сетчатки и хорошо привлекает внимание. Контрастный цвет используется для выделения основного действия, мы сразу понимаем, что в интерфейсе, в данном окне это действие является основным.

Пример акцентирования действия при помощи цвета.

Цвета имеют дополнительное социально-психологическое значение: красный — цвет опасности, зеленый — что-то положительное.

Интересный факт: красные кнопки, несмотря на яркость, дают меньшую конверсию, чем кнопки другого цвета. Возможно, это связано с тем, что в операционных системах красный означает невозвратное действие: надо подумать, прежде, чем нажать. Впрочем, если красный — фирменный цвет компании, то естественно, что кнопка тоже может быть красной, и она не будет ассоциироваться с опасностью.

Используя цвет как выделитель, нужно не забывать, что есть некоторые люди различают не все цвета. У нас есть три вида рецепторов: один тип чувствителен к красному цвету, второй к зеленому, третий к синему. Бывает, что один из них не работает и тогда человек не различает какой-то цвет.

Изображение, используемое в тестировании на дальтонизм — особенности зрения, при которой люди не различают некоторые цвета.

Обратный контраст тоже работает, но его лучше не использовать. Нам некомфортно долго смотреть на суперактивное поле, потому что яркие цвета — очень сильный раздражитель, происходит сильное возбуждение сетчатки и расходуется энергия передающих нервов.

Контраст размера

Объект большего размера кажется важнее, потому что есть иллюзия, что он либо ближе, либо опаснее.

Контраст размера дизайнеры интерфейсов используют для того, чтобы подчеркнуть важность объекта, обратить на него внимание в первую очередь. Мы таким образом управляем фокусом: делаем большую кнопку «купить» и небольшую «нет, спасибо».

Пример использования контраста размера

Иногда законы психофизиологии используются не для того, чтобы помочь пользователю, а наоборот. На скриншоте ниже классический пример антипаттерна.

Кнопку Submit выделили размером и цветом. Но очень сложно найти кнопку No, thanks: крестик убрали, невозможно ничего нажать, сама кнопка запряталась среди текста, который нам не хочется читать, чтобы активировать центр чтения ради решения такой простой задачи. Это работает. Но использовать такие приемы или нет — моральный выбор дизайнера, потому что очевидно, что такой подход не ориентирован на пользователя.

Как контраст размера помогает при использовании «плитки»

Представление информации в виде «плитки» быстро стало популярным, потому что это удобно. Но есть проблема: среди одинаковых блоков трудно выделить важное.

Дизайнеры используют контраст размера, чтобы пользователь точно понимал, на каком блоке нужно фокусироваться в первую очередь.

Пример использования контраста размера при создании таблиц стиля

Разный размер шрифта — хороший способ создать иерархию.

На левой картинке заголовки первого и второго уровня идентифицировать легко, благодаря хорошему контрасту размера. На примере справа мы догадываемся об иерархии только по косвенным признакам.

Между тем читатель должен очень легко ориентироваться в тексте в любой точке экрана: где заголовок первого уровня, где второго, где третьего.

Между заголовками должен быть сильный контраст. Чем очевиднее структура материала, тем больше шансов, что человек дочитает до конца.

Контраст движения

Движущиеся объекты игнорировать почти невозможно.

Мгновенная реакция и фокусировка на движущимся объекте досталась нам от далеких предков. Двигается? Значит это либо еда, либо опасность. Поэтому сразу, когда в визуальном поле появляется какое-то движение, глаз к нему приковывается автоматически.

Для управления фокусом пользователя, анимация — незаменимая вещь.

Google Material Design

Концепция материального дизайна компании Google — это попытка переосмыслить дизайн физического мира и интерпретировать его в дизайне интерфейса. В июне 2014 года был выпущен гайд по применению принципов материального дизайна в интерфейсах.

Анимации в гайде уделено большое внимание, она даже стоит на первом месте.
Полная версия гайда.

Некоторые принципы анимации, отраженные в гайде:

Естественное ускорение и замедление

Объекты не двигаются линейно. Все, что мы видим, движется с ускорением или замедлением. Поэтому для нас более естественным выглядят ситуации, когда объект вылетает и улетает. Обратите внимание, что скорость вылетания и улетания немного разная. Вылет более заметный, а улет — просто обозначает этот факт.

В этом примере видно, что объекты, которые двигаются линейно, выглядят очень неестественно — как человек со странной походкой. Это вызывает психофизиологическое напряжение, потому что нам нужно разобраться в ситуации: что происходит.

Реакция на действия пользователя

Элементы пользовательского интерфейса кажутся ощутимым, хотя они за стеклом (экран устройства). Для преодоления этого разрыва используется визуальные эффекты, которые выглядят как результат прямой манипуляции. Они показывает, что мы нажали на объект.

Маршрут фокуса

Движение должно начинаться в той точке, на которую нажал пользователь, чтобы он не отвлекался и у него была целостная картина, то вся анимация должна быть вдоль линии фокуса.

Плавные переходы

Непрерывная анимация комфортна для взгляда, когда все объекты перестраиваются плавно.

Переход между двумя визуальными сущностями должен быть понятным, гладким и без усилий. Хорошо продуманная переход указывает пользователю, где сосредоточить свое внимание.

Временная иерархия

При построении перехода, необходимо учесть порядок и время появления элемента. Движение должно поддерживать информационную иерархию.

Тем не менее, это не простая формула, в которой самое главное появляется первым, а наименее важное последним. Переходы элементов должны быть плавными и не разрозненными.

Анимация пиктограмм

Значок меню, становится управления стрелками или воспроизведения, пиктограммы плавно изменяются от одной к другой — анимация помогает понять, что это другой контекст.

Все изображения данного раздела взяты из Google design guidelines и используются в качестве демонстрации.

Анимацию удобно использовать, чтобы показать команде разработчиков какие-то функции. В примере ниже анимация использована для того, чтобы показать как решить проблему сочетания бесконечного скролла и футера.

часть 3

Чтение

Положительная динамика / Изображение и текст / Контраст фона/ Засечки / Длина строки / Интерлиньяж / Оформление текста / «Обратная пирамида»

Положительная динамика

Мы привыкли, что все повествование идет слева направо и сверху вниз и это сильно влияет на восприятие интерфейса.

Обратное направление неестественно для восприятия, так же как хождение задом наперед.

Фотография ниже — это пример, когда направление взгляда используется не для создания динамики, а для обозначения геометрии пространства. У зрителя есть понимание, что враг находится левее и поэтому выбрана такая композиция.

Советская артподготовка в районе Зееловских высот, 16–19 апреля 1945 года. Источник фото: wikipedia.org

Вперед и назад — направления, которые легко считываются в интерфейсах. «Назад» находится левее, «вперед» — правее.

Изображение и текст

Мозг решает задачу следующим образом — сначала пытается из изображения вытянуть всю информацию и потом, если не получается, читает текст.

Текст пришел из иероглифического письма. Иероглифы использовали для обозначения предметов и явлений, каждому соответствовал какой-то символ. Если нужно было вставить географическое название или иностранное имя, тогда использовали картуш — рисовали продолговатый закругленный контур с горизонтальной линией, который означал, что внутри будет действовать фонетическое письмо (будет читаться первый слог каждого иероглифа).

Позже, когда началось заимствование письменности, то народы с другим языком уже использовали только фонетическое письмо, иероглифы упрощались. Проблема слогового письма заключается в том, что для слогов нужно очень много. Если букв достаточно 33, то слогов требуется целая тысяча. Поэтому технология фонетического письма очень быстро захватила мир. Чтобы передать информацию было достаточно знать три десятка символов и правила языка. Это более качественный способ передачи, поэтому все на него быстро перешли.

Восприятие изображение и текста. Если посмотреть на температурные карты, то мы видим, что мозг сразу пытается решить задачу максимально эффективным способом — смотрит на изображение и вообще пытается не активировать центр чтения. Если он ищет как приготовить пиццу и видит, что есть картинка и есть видео, можно просто нажать на play и посмотреть, он даже уже не будет тратить время на прочтение всего остального, сразу просто нажмет и перейдет.

Пример хорошо построенной подачи материала

Используемые принципы: лицо хорошо работают, как идентификатор. Мы начинаем с изображения и уже сразу можем совершить перейти по ссылке, либо прочитать крупный заголовок, если недостаточно — описание.

Пиктограммы

Очень удобны для пользователя в плане считываемости информации, и нужно стараться их использовать чаще. Единственная проблема — зависимость значения пиктограммы от контента.

Если посмотреть на пиктограммы выше, то многие из них некоторое время назад были неизвестны вообще. Например, пиктограмма «облако». Она возникла с появлением соответствующей технологии, которая сейчас очень развита. Благодаря облачной технологии, появилась пиктограмма «Сохранить», долгое время она выглядела как дискета, но теперь это облако. Аналогичная ситуация с голосовым вводом. Пиктограмму в виде микрофона еще лет 7 назад никто бы не понял.

Незнакомые пиктограммы требуют обучения. Новую иконку можно поставить вместе с подписью, и потом, постепенно, текст убрать.

Случается, что некоторые, казалось бы очевидные пиктограммы, не распознаются пользователями. Например, был случай, когда «шестеренку» пользователи не воспринимали как «настройки» и ее заменили на «карандаш».

Контраст фона

Легче всего читается максимально контрастный текст — черный на белом.

Инверсное начертание текста (выворотка) может быть комфортнее при чтении в темноте. Также выворотку используют, чтобы подсвечивать код, это позволяет использовать большее количество цветов. На черном фоне оттенки различаются лучше — салатовый легко отличить от зеленого не отличить на белом.

Слабый контраст (слева) между фоном и текстом вызывает напряжение. Тональный контраст не воспринимается людьми, страдающими дальтонизмом и является слишком сильным раздражителем.

Засечки

Долгое время считалось, что текст с засечками читается быстрее. Такой вывод был сделан на основе результатов исследования, которое проводилось в середине XX века.

Современные исследования говорят о том, что это скорость чтения — вопрос привычки. Читают быстрее текст, набранный шрифтом, к которому привыкли.

Исторически засечки были компенсаторами для краски в печатной технологии. Сейчас мы двигаемся к тому, что это не важно, поэтому можно спокойно набирать текст гротеском, а шрифт с засечками использовать только тогда, когда нужно сделать отсылку к какому-то стилю.

В современном вебе текст, набранный шрифтом без засечек — обычная история.

Длина строки

Очень подробно о том, какой должна быть идеальная длина строки написано в книге Роберта Брингхерста «Основы стиля в типографике».

В целом, очень длинная колонка, заставляет нас двигать головой, а не только глазами, это расходует дополнительную энергию и утомляет. Плюс трудно найти начало следующей строки. Очень широкие строки пользователи избегают читать.

Слишком узкие тоже проблемные: при переходе с одной строчки на другую мы ищем начало и когда это происходит очень часто, человек утомляется. К тому же русские слова достаточно длинные, и в узких колонках появляется гребенка.

Интерлиньяж

Более разреженный текст читать комфортнее, чем плотно сбитый.

Когда межстрочное расстояние не слишком узкое, легче удерживать фокус, не читаешь одну и ту же строку два раза, потому что они далеко друг от друга стоят.

Стандартный интерлиньяж подбирается в системах автоматически. Чуть более разреженный интерлиньяж дает сигнал, что над текстом работали, видна рука дизайнера.

Пример хорошего сочетания размера кегля и интерлиньяжа. В лиде оно равно соотношению 30px/42px, в основном тексте 20px/30px.

Оформление текста

Чтобы текст прочитали, у него обязательно должна быть структура: заголовки, подзаголовки, разбивка на абзацы.

Выше мы рассматривали как пользователь сканирует текст, поэтому понятно, что «котлету» без разбивки на заголовки, подзаголовки и параграфы никто читать не станет. Нужно обязательно группировать информацию, делать списки, выделять акценты.

Когда текст разделен на параграфы, температурные карты чтения показывают нам букву F. Пользователь читает первый параграф, потом проскакивает в середину, потом если надо, то он возвращается назад. На месте второго параграфа вообще дыра, можно написать все, что угодно.

С поисковой выдачей вообще все печально. Ниже пятого пункта никто даже не сканирует.

Обратная пирамида текста

Прием из новостной журналистики, когда информация подается по степени значимости: сначала самое важное, потом детали.

Как правило, новости построены таким образом, что суть можно понять из заголовка, основное содержание прочитать в лиде (вводном тексте) и уже потом, в тексте, узнать детали.

Этот же прием хорошо работает в презентациях и вообще в тех случаях, когда стоит задача максимально облегчить восприятие информации для пользователя.

Иерархия в тексте помогает легче воспринимать информацию.

Автор текста и иллюстраций: Ярослав Шуваев
fb.com/shuvaev

Дизайн и верстка: Ира Смирнова

Введение

Задача и идея

Дизайн-исследование и фокусировка

Оcновы графического дизайна

Прототипирование

Контент

Дизайн